<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"  content="ie=edge"/>
    <title>水平滚动跟手轮播图 vue演示</title>
 
    <script src="./emoji/vue.js"></script> 
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
	
	<script src="./emoji/axios.min.js"></script>

    <script src="./emoji/mock.js"></script>
	
	<script src="./emoji/jquery.min.js"></script> 
	 
	<script src="./emoji/mock.testData.js"></script>
	
	<link rel="stylesheet" type="text/css" href="./css/vue-emoji.css" />
	<!-- <script src="./emoji/bscroll.min.js"></script> -->
	
	<script type="text/javascript" src="./emoji/jquery.min.js"></script>
	
	
	
	
</head>
<body>

<h3 style="background-color: #999999; height: 40px; top: 20px;">表情键盘</h3>
<hr style="border-width: 2px;" />

<div id="app" class="container">
    <ul class="list" id='emojiList' 
	    @touchstart="gtouchstart($event)" 
		@touchmove="gtouchmove($event)" 
		@touchend="gtouchend($event)">
		
		<!-- 第一个 -->
		<li class="item" style="width: 360px;height: 184px;"> 
			<div v-for="(item1,index1) in beforeList" :key="index1">
			   <img   
			   v-if="item1.url!=''" 
			   :src="items[groupIndex -1].minEmoji && index1===beforeList.length -1  ? item1.url : items[groupIndex -1].emojiPath + item1.url " 
			   class="emojiImg"
			   :class="[{ 'minImg' : items[groupIndex-1].minEmoji },{'bigImg' : !items[groupIndex-1].minEmoji }]"
			   /> 
			    
			  <div v-else 
			   class="emojiImg"
			   :class="[{ 'minImg' : items[groupIndex-1].minEmoji },{'bigImg' : !items[groupIndex-1].minEmoji }]">
			   </div>
			   
			</div>
		</li> 
		  
		 <!-- 中间 -->
		<li class="item" style="width: 360px;height: 184px;" v-for="(item3,index3) in items[groupIndex].emojiList" :key="index3" >
			<div v-for="(em4,index4) in item3" :key="index4" >
				<img :src="items[groupIndex].minEmoji && index4 === item3.length-1 ? em4.url : items[groupIndex].emojiPath + em4.url "
				class="emojiImg"
				:class="[{ 'minImg' : items[groupIndex].minEmoji },{'bigImg' : !items[groupIndex].minEmoji }]"
				@click="imgClick($event,items[groupIndex].minEmoji)"
				/>
			</div>
		</li>
		 
	   <!-- 最后一个 -->
	   <li class="item" style="width: 360px;height: 184px;">
		   <div v-for="(item5,index5) in nextList" :key="index5" >
			   <img 
			   v-if="item5.url!=''" 
			   :src="items[groupIndex +1].minEmoji && index5 === nextList.length -1  ? item5.url : items[groupIndex +1].emojiPath + item5.url " 
			    class="emojiImg"
			   :class="[{ 'minImg' : items[groupIndex+1].minEmoji },{'bigImg' : !items[groupIndex+1].minEmoji }]"/>
		           
		  <div v-else 
		       class="emojiImg"
			   :class="[{ 'minImg' : items[groupIndex+1].minEmoji },{'bigImg' : !items[groupIndex+1].minEmoji }]">
		  </div>
		</div> 
			   
	   </li> 
    </ul>

    <ul class="point" id='pointList' >
		<li class="point-item" v-for="(item7,index7) in pointItemList" :key="index7" 
		:class="{'active':activeIndex -1 ==index7}"></li>
    </ul>

<!-- better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件 -->


  <div class="toast" v-show="toastShow">
       {{toastText}}
  </div>
</div>


 <hr style="border-width: 2px;" />
 <div id="msg" style="margin: 20px 20px; height: 100px;" contenteditable="true" >
 </div>
 
 <hr style="border-width: 2px;" />
 <h3 style="background-color: blueviolet; height: 40px; top: 20px;">评论插件</h3>
<textarea id="text1" style="width:356px; height:80px; border-width: 2px;""></textarea>

 <div id="div1" style="width:360px; height:200px;">
	 <p>输入评论...</p>
 </div>
 
<script>

	// 初始化 同步请求数据
	var emojiListData=[]
	$.ajax({
		url : 'http://mockjs/emoji',
		type : 'get',
		async: false,//使用同步的方式,true为异步方式
		success : function(data){
			var result = JSON.parse(data)
			// 二维数组
			emojiListData=result
		}
	})
	
	// 实例化vue 对象
	var vm = new Vue({
		el: '#app',
		data(){
			return{
				toastShow: false,
				toastText: '',
				beginX:0,
				beforeList:[{}],
				nextList:[{}],
				nowX:0,
				endX:0,
				activeIndex:1,
				groupSize: emojiListData.imgArr.length,         // 表情包的组的个数
				groupIndex:1,         // 当前整个表情包的所在位置索引
				items: emojiListData.imgArr,
				pointItemList: 0,
			 }  
		},
		watch : {
			// TODO
		},
		created(){
            // TODO			
		},
		methods: {
			 resetData: function() {//重置数据
				   var emojiList=document.querySelector('#emojiList');
				   var items=document.querySelectorAll('.item');
				   emojiList.style.width = (vm.items[1].emojiList.length + 2) * window.innerWidth + 'px'  // 适应屏幕  总宽度
				   // 初始化
				   emojiList.style.marginLeft =- (window.innerWidth * vm.activeIndex) + 'px'
				   var pointItems=document.querySelectorAll('.point-item');
				   vm.pointItemList=vm.items[1].emojiList.length
				   vm.beforeList =vm.items[vm.groupIndex-1].emojiList[vm.items[vm.groupIndex-1].emojiList.length-1]
				   vm.nextList =vm.items[vm.groupIndex+1].emojiList[0]
			},
			 // 开始触摸
			gtouchstart:function(e){
				vm.beginX=e.touches[0].clientX
				// vm.toast( '开始: ' + vm.beginX + '')
			},
			// 移动
			gtouchmove:function(e){
				vm.nowX=e.changedTouches[0].clientX
				// vm.toast( '移动: ' + vm.nowX +'')
				vm.slice()
			},
			// 结束触摸
			gtouchend:function(e){
				vm.endX=e.changedTouches[0].clientX
				// vm.toast( '结束: ' + e.changedTouches[0].clientX + '')
				vm.judgeMove()
			},
			/**
			 * 计算起始位置
			 */
			slice: function () {
			    var deltaX = vm.nowX - vm.beginX
				var emojiList=document.querySelector('#emojiList');
                    emojiList.style.marginLeft =- (window.innerWidth * vm.activeIndex) + deltaX + 'px'
			},
			/**
			 * 重置
			 */
			reset : function(){
			    // 需要一个过度让复位更自然
				var emojiList=document.querySelector('#emojiList');
			    emojiList.style.transition = 'all .3s'
			    // 你现在在第几张就要复位到第几张
			    emojiList.style.marginLeft = - (window.innerWidth * vm.activeIndex) + 'px'
			},
			/**
			 * 计算偏移量
			 */
			judgeMove : function(){
				// [0] 获取所有 item 节点
				// var items=document.querySelectorAll('.item');
				var emojiList = document.querySelector('#emojiList');
				// 计算偏移量
				var deltaX = vm.endX - vm.beginX
			    if(deltaX >= window.innerWidth * 3 / 5){  // 右移
			        vm.toast('上一张')
					// [1]小点指示器 减去 1
					vm.activeIndex--
					// [2]小点指示器边界判断, 小于等于 0, 重新赋值为 1
			        if(vm.activeIndex <= 0 ){	 
						// [3]当 activeIndex 小于等于0 时, 组的索引 减去 1
						vm.groupIndex --
						// [4]groupIndex 组的边界判断 小于等于 0, 重新赋值为 1,并且指示器 activeIndex 为 1
						if(vm.groupIndex <= 0){     
							vm.groupIndex = 1 
							vm.pointItemList = vm.items[1].emojiList.length
							vm.activeIndex = 1
							vm.beforeList =vm.items[vm.groupIndex-1].emojiList[vm.items[vm.groupIndex-1].emojiList.length-1]
							vm.nextList =vm.items[vm.groupIndex+1].emojiList[0]  
							// 切换改变整体宽度
							emojiList.style.width = (vm.items[1].emojiList.length +2) * window.innerWidth + 'px'  // 适应屏幕  总宽度
							// [5]复位 带动画
							vm.reset()  
						}else{
								vm.pointItemList = vm.items[vm.groupIndex].emojiList.length
								vm.activeIndex = vm.items[vm.groupIndex].emojiList.length
								vm.beforeList =vm.items[vm.groupIndex-1].emojiList[vm.items[vm.groupIndex-1].emojiList.length-1]
								vm.nextList =vm.items[vm.groupIndex+1].emojiList[0]
								// 切换改变整体宽度
								emojiList.style.width = (vm.items[vm.groupIndex].emojiList.length +2) * window.innerWidth + 'px'  // 适应屏幕  总宽度
						} 
							vm.toast("组数:"+vm.groupIndex +",组个数:" + vm.groupSize -2 )
						  // [6]设置偏移显示
						  emojiList.style.transition = 'none'
						  emojiList.style.marginLeft = - (window.innerWidth * vm.activeIndex) + 'px'
			        }else{
			        	 emojiList.style.marginLeft = - (window.innerWidth * vm.activeIndex) + 'px'
			        }
			    }else if (deltaX <= - window.innerWidth * 3 / 5){ // 左移
			        vm.toast('下一张')
					// [1]小点指示器 加 1
					++vm.activeIndex
					// [2]小点指示器边界判断, 大于等于 items.length -2, 重新赋值为 items.length -2
			        if(vm.activeIndex > vm.items[vm.groupIndex].emojiList.length ){ 
						// 最后一次改变 组的值
						 ++vm.groupIndex 
						// vm.toast("组数:"+vm.groupIndex +",组个数:" + vm.groupSize)
 						// 判断是否是最后一组
						if(vm.groupIndex > vm.groupSize -2){
							 // 等于1 是循环,等于 vm.groupSize 是结束, 去掉前一个和后一个为空的列表
							vm.groupIndex = vm.groupSize -2 
							vm.pointItemList = vm.items[vm.groupIndex].emojiList.length
							vm.activeIndex = vm.items[vm.groupIndex].emojiList.length
							
							vm.beforeList =vm.items[vm.groupIndex-1].emojiList[vm.items[vm.groupIndex-1].emojiList.length-1]
							vm.nextList =vm.items[vm.groupIndex+1].emojiList[0]
							
							// 切换改变整体宽度
							 emojiList.style.width = (vm.items[vm.groupIndex].emojiList.length +2) * window.innerWidth + 'px'  // 适应屏幕  总宽度
							 vm.reset()
						}else{
							vm.pointItemList = vm.items[vm.groupIndex].emojiList.length
							vm.activeIndex = 1
							vm.beforeList =vm.items[vm.groupIndex-1].emojiList[vm.items[vm.groupIndex-1].emojiList.length-1]
							vm.nextList =vm.items[vm.groupIndex+1].emojiList[0]
							// 切换改变整体宽度
							emojiList.style.width = (vm.items[vm.groupIndex].emojiList.length +2) * window.innerWidth + 'px'  // 适应屏幕  总宽度
						} 
						 // [6]设置偏移显示
						 emojiList.style.transition = 'none'
                         emojiList.style.marginLeft = - (window.innerWidth * vm.activeIndex) + 'px'
			         }else{
						 emojiList.style.marginLeft = - (window.innerWidth * vm.activeIndex) + 'px'
					}
			    } else{
			        // vm.toast('不动')
			        vm.reset()
			    }
			},
			
			 // 图片点击事件
			imgClick: function(obj,minEmoji){
				// alert(obj.target.currentSrc)
				// alert(minEmoji)
				var msg=document.querySelector('#msg');
				if(minEmoji){
					msg.innerHTML += "<img src=" + obj.target.currentSrc + " style='width:24px;height:24px;' />"
				}else{
					msg.innerHTML += "<img src=" + obj.target.currentSrc + " style='width:32px;height:32px;' />"
				}
			},
			 // 自定义 toast 弹窗
			 toast: function (str) {
			    let me = this
				if(str.length>0){
					me.toastText = str
					me.toastShow = true
					setTimeout(function(){
					  me.toastShow = false
					  me.toastText = ""
					}, 1500)
				 }
			  } 
		}
	});
	
    vm.resetData()
</script>

<script type="text/javascript" src="./wangEditor/wangEditor.js"></script>
<!-- 必须在 wangEditor.js 之后--> 
<script type="text/javascript" src="./emoji/comment.js"></script>
	
</body>
</html>